<template>
  <div class="footer-container">

    <div class="footer-friend-href">
      <div class="footer-friend-href-box">
        <span class="friend-text">友情链接:</span>
        <a href="http://dahehr.cn/" target="_blank">大和人力资源网</a>
      </div>
    </div>

    <div class="footer-contact-box">

      <div class="footer-contact-us">

        <div class="contact-us-con">
          <span class="contact-en">CONTACT US</span>
          <span class="contact-text">联系我们</span>

          <div class="contact-con">
            <img src="../images/contact_add.png" class="footer-pic1"/>
            <span class="contact-pic-title">广东省东莞市厚街镇新汽车客运站（高速路口旁50米）</span>
          </div>
          <div class="contact-con">
            <img src="../images/contact_tel.png" class="footer-pic1"/>
            <span class="contact-pic-title">400-9600395</span>
          </div>
          <div class="contact-con">
            <img src="../images/contact_web.png" class="footer-pic1"/>
            <span class="contact-pic-title">www.lanpin123.com</span>
          </div>
        </div>

        <div class="qr-code-box wx-code">
          <img src="../images/weixin_code.png" class="footer-pic2"/>
          <span class="qr-text">微信公众号</span>
        </div>
        <div class="qr-code-box">
          <img src="../images/android_03.png" class="footer-pic2"/>
          <span class="qr-text">APP下载</span>
        </div>

      </div>

    </div>

    <div class="footer-copy-right">Copyright © 2018-2020 广东蓝聘网络科技有限公司 粤ICP备18085259号</div>

  </div>
</template>

<script>
  export default {}
</script>

<style lang="less" scoped>
  @import "../assets/mixin";

  .footer-container {
    .wh(100%, 412px);
    .footer-friend-href {
      display: flex;
      justify-content: center;
      .wh(100%, 72px);
      background: #F0F3F5;
      .footer-friend-href-box {
        display: flex;
        align-items: center;
        .wh(1200px, 72px);
        .friend-text {
          .size-color-weight(14px, #47718F, 500);
        }
        a {
          margin-left: 10px;
          .size-color(14px, #47718F);
          cursor: pointer;
          &:hover {
            font-weight: 500;
            color: #3CAFFF;
          }
        }
      }
    }
    .footer-contact-box {
      display: flex;
      justify-content: center;
      .wh(100%, 305px);
      background: #263540;
      .footer-contact-us {
        display: flex;
        align-items: center;
        .wh(1200px, 305px);
        .contact-us-con {
          display: flex;
          flex-direction: column;
          .contact-en {
            .size-color(30px, #FFF)
          }
          .contact-text {
            padding-top: 11px;
            padding-bottom: 27px;
            .size-color(24px, #FFF)
          }
          .contact-con {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            .footer-pic1 {
              .wh(24px, 24px)
            }
            .contact-pic-title {
              padding-left: 18px;
              .size-color(16px, #FFF)
            }
          }
        }
        .qr-code-box {
          display: flex;
          flex-direction: column;
          align-items: center;
          .qr-text {
            padding-top: 12px;
            .size-color(16px, #FFF)
          }
          .footer-pic2 {
            .wh(124px, 124px)
          }
        }
        .wx-code {
          margin-left: auto;
          margin-right: 54px;
        }
      }
    }
    .footer-copy-right {
      .fj(center, center);
      .wh(100%, 36px);
      background: #242D33;
      .size-color(12px, #516C7E);
    }
  }
</style>
